<template>

  <el-row :gutter="0" style="height: 100%;background-color: #99a9bf">
    <el-col :span="10"><div style="text-align: center;margin-top: 30%" ></div></el-col>
    <el-col :span="8" style="height: 50%;align-content: center"><div style="text-align: center;margin-top: 40%;background-color: #e5e9f2;width: 70%;height: 100%" >
      <div style="align-content: center">
      <img src="../assets/login.jpg" style="height:20%;width: 30%;align-content: center;margin-top: 20%"></div>
      <el-form ref="form" :model="form" label-width="80px" style="width: 70%;margin-left: 10%">
        <el-form-item label="用户名">
          <el-input suffix-icon="el-icon-user-solid"   v-model="form.useraccount"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input suffix-icon="el-icon-lock"  type="password" v-model="form.password"></el-input>
        </el-form-item>


        <el-form-item prop="code" label="验证码">
          <el-input
            v-model="form.code"
            placeholder="验证码"
            style="width: 65%"
          ></el-input>
          <div class="login-code">
            <img :src="codeUrl" @click="getCode" style="height: 40px;width: 100%"/>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login" style="width: 100%">登录</el-button>
        </el-form-item>
      </el-form>


    </div></el-col>
    <el-col :span="6"><div style="text-align: center;margin-top: 20%" ></div></el-col>
  </el-row>

</template>

<script>
import instance from "../utils/request";
import {mapMutations} from "vuex"

export default {
  name: "Login",
  data(){
    return{
      form: {
        useraccount: '',
        password: '',
        code:'',
      },
      codeUrl:''
    }
  },
  methods: {
    ...mapMutations("loginModule",["setToken","setUser"]),  //使用vuex自定义的方法

    login() {
     instance.post("/user/login", JSON.stringify(this.form)

       ).then(res=>{
       console.log(res);
       if(res.data.code == "SUCCESS"){

         // this.setToken(res.data.list[0]);
         // this.setUser(res.data.obj);

         //浏览器本地存储
         localStorage.setItem("token",res.data.list[0]);
         localStorage.setItem("user",JSON.stringify(res.data.obj));
         console.log( res.data.obj);
         this.form = res.data.obj;
         console.log("1111"+res.data.obj);
         this.$router.push("/index");
       }else {
          // alert(res.data.msg);
       }

     }).catch(err=>{
       alert("内部服务器错误");
     })
    },
    getCode(){
      instance.get("/getCode",{responseType:'blob'}).then(res=>{
        this.codeUrl = window.URL.createObjectURL(res.data);
        console.log(res);

      }).catch(res=>{
        alert("获取验证码出错");
      });
    }
  },
  created() {

   instance.get("/getCode",{responseType:'blob'}).then(res=>{
     this.codeUrl = window.URL.createObjectURL(res.data);
      console.log(res);

    }).catch(res=>{
      alert("获取验证码出错");
    });
  }
}
</script>

<style scoped>

.login-code {
  width: 33%;
  height: 38px;
  float: right;
img {
  cursor: pointer;
  vertical-align: middle;
}
}
</style>


